<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>文章列表</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/iconfont.css" />
    <link rel="stylesheet" href="./css/main.css" />
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <!-- 引入模板引擎js文件 -->
    <script src="./libs/template-web.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="common_title">文章列表</div>
      <div class="container-fluid common_con">
        <div class="row opt_btns">
          <div class="col-xs-6">
            <form class="form-inline">
              <select id="selCategory" name="" class="form-control input-sm">
                <option value="">所有分类</option>
                <option>未分类</option>
                <option>奇趣事</option>
                <option>会生活</option>
                <option>爱旅行</option>
              </select>
              <select id="selStatus" name="" class="form-control input-sm">
                <option value="">所有状态</option>
                <option value="草稿">草稿</option>
                <option value="已发布">已发布</option>
              </select>
              <button id="btnSearch" class="btn btn-default btn-sm">
                筛选
              </button>
            </form>
          </div>
          <div class="col-xs-6">
            <a
              href="article_release.html"
              class="btn btn-success btn-sm pull-right"
              id="release_btn"
              >发表文章</a
            >
          </div>
        </div>
        <table class="table table-striped table-bordered table-hover mp20">
          <thead>
            <tr>
              <th>标题</th>
              <th>作者</th>
              <th>分类</th>
              <th class="text-center">发表时间</th>
              <th class="text-center">状态</th>
              <th class="text-center" width="100">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>王积千造统最头</td>
              <td>杰克</td>
              <td>奇趣事</td>
              <td class="text-center">2017-06-08 07:08:46</td>
              <td class="text-center">已发布</td>
              <td class="text-center">
                <a href="article_edit.html" class="btn btn-default btn-xs"
                  >编辑</a
                >
                <a
                  href="javascript:void(0);"
                  class="btn btn-danger btn-xs delete"
                  >删除</a
                >
              </td>
            </tr>
          </tbody>
        </table>
        <div class="row text-center"></div>
      </div>
    </div>
  </body>
  <!-- 导入分页插件 -->
  <script src="./libs/jquery.twbsPagination.js"></script>

  <!-- 分页导航插件的容器 -->
  <div class="row text-center">
    <ul id="pagination" class="pagination-sm"></ul>
  </div>

  <script src="./libs/https.js"></script>
  <!-- 准备类别选项结构 -->
  <script type="text/html" id="tpl-category">
    <!-- $value 别名=> v -->
    {{each data v}}
    <option value="{{v.id}}">{{v.name}}</option>
    {{/each}}
  </script>

  <!-- 准备类别选项结构 -->
  <script type="text/html" id="tpl-category">
    {{each data v}}
    <option value="{{v.id}}">{{v.name}}</option>
    {{/each}}
  </script>
  <!-- 准备文章列表模板结构 -->
  <script type="text/html" id="tpl-article">
    {{each data.data v}}
    <tr>
      <td>{{v.title}}</td>
      <td>{{v.author}}</td>
      <td>{{v.category}}</td>
      <td class="text-center">{{v.date}}</td>
      <td class="text-center">{{v.state}}</td>
      <td class="text-center">
        <a
          href="article_edit.html?article={{v.id}}"
          class="btn btn-default btn-xs"
          data-id="{{v.id}}"
          >编辑</a
        >
        <a
          href="javascript:void(0);"
          class="btn btn-danger btn-xs delete"
          data-id="{{v.id}}"
          >删除</a
        >
      </td>
    </tr>
    {{/each}}
  </script>

  <script>
    $(function () {
      // 0. 先让父页面index的二级菜单高亮
      parent.$(".level02 li").eq(0).click();

      // 全局变量
      let selPage;
      // 1. 获得所有文章分类,生成下拉框结构
      $.ajax({
        type: "get",
        url: BigNew.category_list,
        success: function (backData) {
          if (backData.code == 200) {
            // 2. 结合模板引擎,返回的数据,生成标签结构
            let htmlStr = template("tpl-category", backData);
            // 3. 将原结构中的所有分类,拼接到最前面
            $("#selCategory").html(
              `<option value="">所有分类</option>` + htmlStr
            );
          }
        },
      });
      // 尝试启动分页导航
      // $("#pagination").twbsPagination({
      //   // 总页数: 根据后台返回的文章数量来决定
      //   totalPages: 30,

      //   // 当前可见页数,当前有几个数字按钮
      //   visiblePages: 10,

      //   // 当前被选中的页数
      //   startPage: 1,

      //   // 关闭默认的初始点击事件
      //   initiateStartPageClick: false,

      //   // 修改分页导航的按钮文本
      //   first: "首页",
      //   last: "尾页",
      //   next: "下一页",
      //   prev: "上一页",

      //   // 页码的点击事件
      //   onPageClick: function (event, page) {
      //     // page: 当前被点击的页码,根据页码获得指定的文章数据
      //     console.log(page);
      //   },
      // });
      // 4. 先有数据,才有分页导航
      // 封装函数: 获得文章列表数据,渲染结构
      function loadData(page) {
        // 5. 发起ajax请求,获得文章列表数据
        $.ajax({
          type: "get",
          url: BigNew.article_query,
          data: {
            // 首次加载的时候,类型与状态都为空
            // 由类型下拉框选中的值
            type: $("#selCategory").val(),
            // 由状态下拉框选中的值
            state: $("#selStatus").val(),

            // page: 请求指定页码的文章数据
            page: page,
            // perpage: 每页显示多少条数据
            perpage: 5,
          },
          success: function (backData) {
            console.log(backData);
            if (backData.code == 200) {
              // 针对没有数据的文章类别做判断处理
              if (backData.data.totalCount > 0) {
                // 有数据,则加载表格结构,以及分页导航
                // 6. 结合模板引擎生成标签结构
                let htmlStr = template("tpl-article", backData);
                // 7. 将生成的标签渲染到结构中
                $("tbody").html(htmlStr);

                // 8. 渲染结构之后,加载分页导航
                // 特别不好的一点: 分页导航的属性只有第一次设置的时候才有效
                // 因为首次加载总页数就是44,所以默认就一直是44
                // 再次设置分页导航之前,先摧毁之前的分页导航
                $("#pagination").twbsPagination("destroy");
                $("#pagination").twbsPagination({
                  // 总页数: 根据后台返回的文章数量来决定
                  totalPages: backData.data.totalPage,

                  // 当前可见页数,当前有几个数字按钮
                  visiblePages: 10,

                  // 当前被选中的页数
                  startPage: page,

                  // 关闭默认的初始点击事件
                  initiateStartPageClick: false,

                  // 修改分页导航的按钮文本
                  first: "首页",
                  last: "尾页",
                  next: "下一页",
                  prev: "上一页",

                  // 页码的点击事件
                  onPageClick: function (event, page) {
                    // page: 当前被点击的页码,根据页码获得指定的文章数据
                    // 9.直接调用loadData函数,获得指定页码的数据加载结构
                    loadData(page);
                    selPage = page;
                  },
                });
              } else {
                // 没有数据,则清空表格,不要显示分页导航,显示提示文本
                $("tbody").empty();
                $("#pagination").html("当前类别没有任何数据...");
              }
            }
          },
        });
      }
      // 首次加载
      loadData(1);

      // 10. 给筛选按钮设置点击事件
      $("#btnSearch").on("click", function (e) {
        e.preventDefault();
        // 11. 发起ajax请求,获得指定类型以及指定状态的文章
        // 调用loadData获得数据,渲染页面
        // 每次筛选的都是新的类型文章数据,所以默认从第1页展示
        loadData(1);
      });

      // 完成文章列表删除功能
      // 11. 给所有删除按钮设置事件
      $("tbody").on("click", ".delete", function () {
        // 12. 获得当前按钮的dataid
        let dataid = $(this).attr("data-id");

        // 13. 发起ajax请求,删除指定文章数据
        $.ajax({
          type: "post",
          url: BigNew.article_delete,
          data: {
            id: dataid,
          },
          success: function (backData) {
            if (backData.code == 204) {
              // 14. 删除时候,重新渲染页面
              // 注意1: 在哪一页删除,就应该加载哪一页的数据
              // 注意2: 如果删除的是最后一条数据,则应该加载上一页数据selPage-1
              // 什么情况下是最后一条: 只有一个tr的时候
              if ($("tbody tr").length > 1 || selPage == 1) {
                loadData(selPage);
              } else {
                selPage = selPage - 1;
                loadData(selPage);
              }
            }
          },
        });
      });
    });
  </script>
</html>
